<template>
  <uni-drawer ref="showLeft" mode="left" :width="320">
    <scroll-view :scroll-y="true" style="height: 100%">
      <div
        class="books-item"
        v-for="item in booksList"
        @click="handleChangeItem(item)"
        :key="item.id"
      >
        {{ item.title }}
      </div>
    </scroll-view>
  </uni-drawer>
</template>

<script setup lang="ts">
import { ref, toRefs } from "vue";
import useBooksStore from "@/store/modules/books";
import request from "@/utils/request";

const booksStore = useBooksStore();
const { booksList } = toRefs(booksStore);
const props = defineProps({
  id: {
    type: Number,
    default: 0,
  },
});
const { id } = toRefs(props);
const showLeft = ref<unknown | null>(null);

const handleChange = () => {
  // 判断是否传入小说id
  if (id.value != 0) {
    getChapter();
  }
  showLeft.value?.open();
};
const getChapter = async () => {
  const result = await request({
    url: `novel/detail/${id.value}`,
  });
  const { list } = result;
  booksList.value = list;
  console.log(result, "result--------获取章节信息");
};
const handleChangeItem = (e: unknown) => {
  if (!e.id) return;
  uni.redirectTo({
    url: `/pages/bookRead/bookRead?id=${e.id}`,
  });
};
defineExpose({
  handleChange,
});
</script>

<style lang="scss" scoped>
.books-item {
  height: 100rpx;
  line-height: 100rpx;
  border-bottom: 1rpx solid #ccc;
  // text-align: center;
  font-size: 28rpx;
  color: #333;
}
</style>
